import Taro, { Component } from '@tarojs/taro'
import { View, Button, Text } from '@tarojs/components'
import './index.scss'
import AddQuestion from '../../components/add-quertion/add-quertion';
import { getStore, setStore } from '../../util';

export default class Index extends Component {
  config = {
    navigationBarTitleText: '首页'
  }
  state = {
    showAddQuestion: false,
    questionList: getStore('question') || []
  }
  componentWillReceiveProps() { }
  componentWillUnmount() { }
  componentDidShow() { }
  componentDidHide() { }
  addQuestion() {
    this.setState({ showAddQuestion: true })
  }
  cancelQuestion() {
    this.setState({ showAddQuestion: false })
  }
  receiveQuestion(options) {
    let { questionList } = this.state
    questionList.push(options)
    this.setState({ questionList, showAddQuestion: false }, () => setStore('question', this.state.questionList))
  }
  render() {
    let { showAddQuestion, questionList } = this.state
    return (
      <View>
        <View className='title'>问答模块案例</View>
        <Button className='btn-question' onClick={this.addQuestion.bind(this)}>提问</Button>
        {showAddQuestion ? <AddQuestion
          cancelQuestion={this.cancelQuestion.bind(this)}
          receiveQuestion={this.receiveQuestion.bind(this)}
        /> : null}
        <View className='question-list'>
          {questionList.map((item, index) => (
            <View className='question-card' key={index}>
              <View className='question-title'>{item.title}</View>
              <View className='question-des'>{item.des}</View>
            </View>
          ))}
        </View>
      </View>
    )
  }
}